<script setup>
import { getWhlist } from '@/api/setting'
import { getTypeId, getCategoryList, getInventoryList } from '@/api/equipment/whm'
import { ref, watch } from 'vue'
import TreeSlideShow from '@/components/tree/TreeSlideShow.vue';
const whlist = ref([])
const typeId = ref('')
const treeEmptyText = ref('')
const categoryList = ref([])
const isAll = ref(true)
const searchData = ref({
  whId: '',
  categoryId: '',
  typeId: '',
  page: 1,
  pageSize: 10,
})
const isTableLoading = ref(false)
/** 获取仓库列表 */
const doGetWhlist = async () => {
  await getWhlist('备品备件').then(res => {
    whlist.value = res.data.data
    /** 设置默认仓库为列表第一个 */
    searchData.value.whId = res.data.data[0].id
  })
}
doGetWhlist()
/** 获取类目列表 */
async function init() {
  treeEmptyText.value = '数据刷新中'
  await getTypeId('备品备件').then(res => {
    typeId.value = res.data.data.id
    searchData.value.typeId = res.data.data.id
  })
  await getCategoryList(typeId.value).then(res => {
    categoryList.value = res.data.data
    treeEmptyText.value = '暂无数据'
  })
}
init()

/** 搜索product */
searchData.value.typeId = typeId.value
const inventoryResult = ref({
  total: 0,
  records: []
})
function getNodeProduct(data) {
  searchData.value.categoryId = data.id
}
watch(
  [searchData, isAll],
  async (newValue) => {
    if (newValue[0].categoryId !== '' && newValue[0].whId !== '') {
      isTableLoading.value = true
      console.log(newValue)
      await getInventoryList(newValue[0], newValue[1]).then(res => {
        console.log('res', res)
        inventoryResult.value = res.data.data
        isTableLoading.value = false
      })
    }
  },
  { deep: true }
)
</script>

<template>

  <el-row>
    <TreeSlideShow :list="categoryList" title="类别目录" @get-node-data="getNodeProduct"></TreeSlideShow>
    <el-col :span="20">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-text style="vertical-align: middle;margin-left: 20px;">仓库选择：</el-text>
          <el-select v-model="searchData.whId" placeholder="请选择仓库" clearable style="margin-left:20px; width: 150px;">
            <el-option v-for="(item, index) in whlist" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="14">
          <!-- <el-text>显示0库存</el-text> -->
        </el-col>
        <el-col :span="4">
          <el-text style="margin-left: 20px;">显示0库存</el-text>
          <el-switch v-model="isAll" :active-value="true" :inactive-value="false"
            style="margin-left: 10px;"></el-switch>
        </el-col>
      </el-row>
      <el-row>
        <el-table v-loading="isTableLoading" :data="inventoryResult.records" stripe style="width: 100%">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column align="center" label="物料名称" prop="productName"></el-table-column>
          <el-table-column align="center" label="物料编号" prop="code"></el-table-column>
          <el-table-column align="center" label="规格型号" prop="model"></el-table-column>
          <el-table-column align="center" label="归属仓库" prop="whName"></el-table-column>
          <el-table-column align="center" label="库存量" prop="total"></el-table-column>
          <el-table-column align="center" label="单位" prop="unit"></el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="{ row }">
              <el-button type="primary" size="small" plain @click="$router.push(
                {
                  path: `/equipment/inventorydetail/${row.id}`,
                  /** query传递row的数据 */
                  // query: {
                  //   row: JSON.stringify(row)
                  // }
                }
              )">查看</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty></el-empty>
          </template>
        </el-table>
      </el-row>
    </el-col>
  </el-row>
</template>

<style></style>